<template>
    <div>
        <input type="button" 
               value="我是父组件中的按钮" 
               @click="show">
        <!-- <child @update:isShow='changeIsShow' v-show="isShow"/> -->

         <!-- <child @update:isShow='bol=>isShow=bol' v-show="isShow"/> -->
             <!-- <child :isShow.sync="isShow" v-show="isShow"/> -->

                <!-- 从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。
                它会被扩展为一个自动更新父组件属性的 v-on 监听器。 -->
             <child :isShow.sync="isShow"   />
                <!-- 写上面的东西 实际上内部的源码是这样的  -->
                <!-- 第一步 @update:ishow监听了子父组件传值的通道 2父子组件传值ishow传给子 -->
                <!-- 这一步做到了 类似于ishow通道的双向数据绑定 然后vue官方 觉得这种写法太复杂 给了一个语法糖 类似于v-model -->
              <!-- <child @update:isShow="bol=>isShow=bol"  :isShow='isShow'/> -->
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol) {
                 this.isShow=bol;
            }
        }
    }
</script>